<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <header class="nav">
        网页聊天
    </header>

    <!-- 主窗口区 -->
    <main class="login-container">
        <div class="login-dialog">
            <h3>登录</h3>
            <form id="loginForm">
                <div class="row">
                    <label for="username">
                        <i class="fas fa-user"></i>
                    </label>
                    <input type="text" id="username" placeholder="请输入用户名" required>
                </div>
                <div class="row">
                    <label for="password">
                        <i class="fas fa-lock"></i>
                    </label>
                    <input type="password" id="password" placeholder="请输入密码" required>
                </div>
                <div class="row">
                    <button type="submit" id="submit">登录</button>
                </div>
            </form>
            <div class="login-link">
                <a href="/register.html">立即注册</a>
                <span> | </span>
                <a href="/admin.html" >进入管理后台</a>
            </div>
        </div>
    </main>

    <!-- 自定义弹框 -->
    <div id="customAlert" class="custom-alert">
        <div class="alert-content">
            <span id="alertMessage"></span>
            <button id="alertClose">&times;</button>
        </div>
    </div>

    <!-- 引入 jquery -->
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <!-- 实现前后端交互的逻辑 -->
    <script>
        // 显示自定义弹框
        function showAlert(message, type = 'info') {
            const alertBox = document.getElementById('customAlert');
            const alertMessage = document.getElementById('alertMessage');
            alertMessage.textContent = message;
            alertBox.className = `custom-alert ${type}`; // 根据类型设置样式
            alertBox.style.display = 'block';
            setTimeout(() => {
                alertBox.style.opacity = '1';
                alertBox.style.transform = 'translateY(0)';
            }, 10); // 延迟触发动画
        }

        // 隐藏自定义弹框
        function hideAlert() {
            const alertBox = document.getElementById('customAlert');
            alertBox.style.opacity = '0';
            alertBox.style.transform = 'translateY(-100%)';
            setTimeout(() => {
                alertBox.style.display = 'none';
            }, 300); // 等待动画结束再隐藏
        }

        // 绑定关闭按钮事件
        document.getElementById('alertClose').addEventListener('click', hideAlert);

        // 表单提交事件
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            // 1. 获取输入框中的内容
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value.trim();

            if (!username || !password) {
                showAlert('用户名和密码不能为空!', 'error');
                return;
            }

            // 2. 发送 ajax 请求进行登录
            $.ajax({
                url: '/login',
                type: 'POST',
                data: { username, password },
                success: function(response) {
                    // 3. 处理响应
                    if(response && response.status == 0){
                        showAlert('你的账号被封禁！请联系管理员处理!', 'error');
                    }
                    else if (response && response.userId > 0) {
                        showAlert('登录成功!', 'success');
                        setTimeout(() => {
                            window.location.href = '/client.html';
                        }, 1500); // 1.5秒后跳转
                    } else {
                        showAlert('登录失败!', 'error');
                    }
                },
                error: function() {
                    showAlert('登录请求失败，请稍后重试。', 'error');
                }
            });
        });
    </script>
</body>
</html>